<template>
  <div>
    <button @click="color='blue'">改蓝色</button>
    <button @click="color='red'">改红色</button>
    <!-- 自定义指令--vue没提供的指令，但是我们自己创造的 -->
    <div v-color="color">这是p标签</div>


    <button @click="bg = 'red'">改背景</button>
    <div v-bgColor="bg">我要背景颜色</div>

    <my-son :color="color"></my-son>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  components: {
    MySon
  },
  data() {
    return {
      color: 'pink',
      bg: 'green'
    }
  },

  directives: {
    // color: {
    //   // 参数1：el，得到的是指令绑定的对象，例如本代码中这个指令绑定给div，所以el就是div这个dom对象
    //   // 参数2：是一个对象，这个对象里有指令的相关信息，但对我们而言最有用的是value属性，value属性里有指令绑定的数据
    //   // bind代表指令绑定到对象上就立即调用的钩子
    //   bind (el, obj) {
    //     console.log('bind')
    //     el.style.color = obj.value
    //   },
    //   // update代表指令所绑定的数据发生改变调用
    //   update (el, obj) {
    //     console.log('update')
    //     el.style.color = obj.value
    //   }
    // },

    // 简写形式
    color (el, obj) {
      el.style.color = obj.value
    },

    // 讲解钩子
    bgColor: {
      bind (el, obj) {
        console.log('bind')
        el.style.backgroundColor = obj.value
      },
      inserted (el, obj) {
        console.log('inserted')
        el.style.backgroundColor = obj.value
      },
      update (el, obj) {
        console.log('update')
        el.style.backgroundColor = obj.value
      },
      componentUpdated () {
        console.log('componentUpdated')
      },

      unbind () {
        console.log('unbind---当指令所绑定的对象销毁时调用')
      }
      
    }
  }
}
</script>

<style></style>
